<script setup lang="ts">
const emergencyContacts = [
  {
    name: '李医生',
    title: '主治医师',
    phone: '13800138000'
  },
  {
    name: '张三',
    title: '护士',
    phone: '13900139000'
  },
  {
    name: '王护士',
    title: '专科护士',
    phone: '13700137000'
  },
  {
    name: '刘医师',
    title: '经验医师',
    phone: '13600136000'
  }
];

const nearbyMedicalResources = [
  {
    name: '北京协和医院',
    type: '综合医院',
    distance: '2.5km'
  },
  {
    name: '同仁医院',
    type: '综合医院',
    distance: '3.8km'
  },
  {
    name: '社区卫生服务中心',
    type: '基础医疗',
    distance: '0.8km'
  }
];

const emergencyRecords = [
  {
    title: '血压异常',
    time: '2024-02-04 10:30',
    status: '已处理'
  },
  {
    title: '心率异常',
    time: '2024-02-03 15:20',
    status: '已处理'
  },
  {
    title: '跌倒报警',
    time: '2024-01-28 09:15',
    status: '已处理'
  }
];

const emergencyPlan = {
  title: '心脏病发作应急处理',
  steps: [
    '1. 立即拨打急救电话 (120)',
    '2. 保持患者半坐位，松开衣物',
    '3. 如有硝酸甘油，遵医嘱使用',
    '4. 保持镇定，等待救援到来'
  ]
};
</script>

<template>
  <div class="emergency-container">
    <div class="emergency-header">
      <h2>应急服务</h2>
      <el-button type="danger" class="emergency-help-btn">
        <el-icon><Warning /></el-icon> 紧急求助
      </el-button>
    </div>

    <div class="emergency-content">
      <!-- 紧急联系人 -->
      <el-card class="emergency-card" shadow="hover">
        <template #header>
          <div class="card-header">
            <h3>紧急联系人</h3>
          </div>
        </template>
        <div class="contact-list">
          <div v-for="(contact, index) in emergencyContacts" :key="index" class="contact-item">
            <div class="contact-info">
              <div class="contact-name">{{ contact.name }}</div>
              <div class="contact-title">{{ contact.title }}</div>
            </div>
            <div class="contact-phone">
              <el-button type="primary" size="small" circle>
                <el-icon><Phone /></el-icon>
              </el-button>
              {{ contact.phone }}
            </div>
          </div>
        </div>
      </el-card>

      <!-- 附近医疗资源 -->
      <el-card class="emergency-card" shadow="hover">
        <template #header>
          <div class="card-header">
            <h3>附近医疗资源</h3>
          </div>
        </template>
        <div class="resource-list">
          <div v-for="(resource, index) in nearbyMedicalResources" :key="index" class="resource-item">
            <div class="resource-info">
              <div class="resource-name">{{ resource.name }}</div>
              <div class="resource-type">{{ resource.type }}</div>
            </div>
            <div class="resource-distance">{{ resource.distance }}</div>
          </div>
        </div>
      </el-card>

      <!-- 应急预案 -->
      <el-card class="emergency-card" shadow="hover">
        <template #header>
          <div class="card-header">
            <h3>应急预案</h3>
          </div>
        </template>
        <div class="emergency-records">
          <div v-for="(record, index) in emergencyRecords" :key="index" class="record-item">
            <div class="record-info">
              <div class="record-title">{{ record.title }}</div>
              <div class="record-time">{{ record.time }}</div>
            </div>
            <el-tag type="success">{{ record.status }}</el-tag>
          </div>
        </div>
      </el-card>

      <!-- 应急预案详情 -->
      <el-card class="emergency-card" shadow="hover">
        <template #header>
          <div class="card-header">
            <h3>应急预案</h3>
            <el-button type="primary" plain size="small">添加</el-button>
          </div>
        </template>
        <div class="plan-header">
          <div class="plan-title">心脏病发作应急处理</div>
          <div class="plan-sections">
            <span>步骤</span>
            <span>措施</span>
            <span>说明</span>
          </div>
        </div>
        <div class="plan-steps">
          <div v-for="(step, index) in emergencyPlan.steps" :key="index" class="plan-step">
            {{ step }}
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<style scoped>
.emergency-container {
  padding: 20px;
}

.emergency-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.emergency-header h2 {
  margin: 0;
  font-size: 24px;
}

.emergency-help-btn {
  font-weight: bold;
}

.emergency-content {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.emergency-card {
  margin-bottom: 20px;
  border-radius: 8px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header h3 {
  margin: 0;
  font-size: 18px;
}

/* 紧急联系人样式 */
.contact-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.contact-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
}

.contact-item:last-child {
  border-bottom: none;
}

.contact-name {
  font-weight: bold;
  font-size: 16px;
}

.contact-title {
  color: #909399;
  font-size: 14px;
}

.contact-phone {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 医疗资源样式 */
.resource-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.resource-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
}

.resource-item:last-child {
  border-bottom: none;
}

.resource-name {
  font-weight: bold;
  font-size: 16px;
}

.resource-type {
  color: #909399;
  font-size: 14px;
}

.resource-distance {
  font-weight: bold;
  color: #409EFF;
}

/* 应急记录样式 */
.emergency-records {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.record-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
}

.record-item:last-child {
  border-bottom: none;
}

.record-title {
  font-weight: bold;
  font-size: 16px;
}

.record-time {
  color: #909399;
  font-size: 14px;
}

/* 应急预案样式 */
.plan-header {
  margin-bottom: 15px;
}

.plan-title {
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 10px;
}

.plan-sections {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  color: #909399;
  font-size: 14px;
  padding-bottom: 5px;
  border-bottom: 1px solid #EBEEF5;
}

.plan-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.plan-step {
  padding: 8px 0;
  font-size: 14px;
}
</style>
